<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>介绍厦门</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 最上部 -->
    <div class="top">
        <div class="logo">厦门</div>
        <div class="pic1"><img src="./img/xiamen.jpg"></div>
        <div class="options">
            <div id="test" class="like">
                <span></span>
                <select>
                    <option value="choose">选择</option>
                    <option value="place">景点</option>
                    <option value="food">美食</option>
                    <option value="culture">文化</option>
                </select>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href="#" class="no1 choose">厦门的简介</a>
                    <a href="#" class="no2">厦门的简介</a>
                </li>
                <li>
                    <a class="no1">厦门的历史</a>
                    <a class="no2">厦门的历史</a>
                </li>
                <li>
                    <a class="no1">厦门的景点</a>
                    <a class="no2">厦门的景点</a>
                </li>
                <li>
                    <a class="no1">厦门的美食</a>
                    <a class="no2">厦门的美食</a>
                </li>
                <li>
                    <a class="no1">厦门的文化</a>
                    <a class="no2">厦门的文化</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 通告 -->
    <div class="announcement">
        <div class="fixed">通告：</div>
        <div class="scrolling-text">
            各位旅客朋友大家好，厦门欢迎您的到来!请您在旅行期间，带好个人行李物品，照顾好老人小孩，注意旅行安全！
        </div>
    </div>
    <div class="banner">
        <!-- 版心上 -->
        <div class="banner-top">
            <!-- 左侧部分 -->
            <div class="banner-left">
                <ul>
                    <li>
                        <a href="#" class="food">热门美食</a>🔥
                    </li>
                    <li>沙茶面🍜</li>
                    <li>姜母鸭🥘</li>
                    <li>海蛎煎🍤</li>
                    <li>土笋冻🎍</li>
                    <li>
                        <a href="#" class="spot">热门景点</a>🔥
                    </li>
                    <li>鼓浪屿</li>
                    <li>沙坡尾</li>
                    <li>白城沙滩</li>
                    <li>黄厝沙滩🏖️</li>
                </ul>
            </div>
            <!-- 轮播图 -->
            <div class="slider">
                <div class="slider-wrapper">
                    <img src="./img/img-01.jpg" alt="" />
                </div>
                <div class="slider-footer">
                    <p>鼓浪屿</p>
                    <ul class="slider-indicator">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="toggle">
                        <button class="prev">&lt;</button>
                        <button class="next">&gt;</button>
                    </div>
                </div>
            </div>
            <!-- 右侧部分 -->
            <div class="banner-right">
                <ul>
                    <li>
                        <a href="#" class="food">文化体验</a>🔥
                    </li>
                    <li>珠绣</li>
                    <li>南音</li>
                    <li>送王船🛥️</li>
                    <li>木偶戏</li>
                    <li>打铁花✨</li>
                    <li>漆线雕</li>
                    <li>剪瓷雕</li>
                    <li>闽南传奇秀</li>
                </ul>
            </div>
        </div>
        <!-- 版心下 -->
        <!-- 食物 -->
        <div class="food-details">
            <h3>
                <p>鹭岛珍馐探秘</p>
            </h3>
            <div class="one">
                <p>沙茶酱是沙茶面的精髓，由花生、椰浆、大蒜、辣椒等材料熬制而成，味道香浓且略带辛辣。</p>
            </div>
            <div class="two">
                <p>姜母鸭味道鲜香，甘辛兼备，姜味浓郁醇厚，鸭肉鲜嫩易嚼，不塞牙，汤汁浓郁，既可蘸食，也可拌饭，还可作为火锅汤底，涮煮各种食材。</p>
            </div>
            <div class="three">
                <p>海蛎煎口感丰富，外酥里嫩。新鲜肥美的海蛎包裹在柔嫩的面糊中，与脆口的蔬菜、滑嫩的蛋搭配，蚵香、菜香、蛋香相互协调</p>

            </div>
            <div class="four">
                <p>土笋冻形似果冻，晶莹透明，口感Q弹爽滑，鲜嫩脆甜。星虫本身的鲜美完全融入到了这晶莹的“冻”中，搭配酱油、永春陈醋、蒜蓉、香菜、泡椒等调料，酸辣开胃，风味独特，让人回味无穷。</p>

            </div>
        </div>
        <div class="no1"></div>
        <!-- 风景 -->
        <div class="spot-details">
            <h3>
                <p>鹭岛风光胜览</p>
            </h3>
            <div class="one">
                <p>属于亚热带海洋性季风气候，温暖湿润，四季如春。地质上是基岩岛，岩性为灰白色中粗粒黑云母花岗岩，构造以断层为主
                    。地形以丘陵山地为主，最高点为海拔92.6米的日光岩.
                </p>
            </div>
            <div class="two">
                <p>沙坡尾地处厦门大片沙滩的尾部，各地沙子汇聚于此，早期厦门港为弧形海湾，沙坡尾一带海湾呈月牙型，金色沙滩连成一片，也被称为“玉沙坡”。
                </p>
            </div>
            <div class="three">
                <p>白城沙滩上点缀着巨大鼠标雕塑，半环型天桥如巨大时钟，白城遗址上有各种抽象方形图案。此外，这里还能眺望双子塔，演武大桥横卧海面，胡里山炮台威严耸立，与沙滩的自然风光相得益彰。
                </p>
            </div>
            <div class="four">
                <p>黄厝海滩属南亚热带海洋性季风气候，长年气温较高，雨量充沛，夏季基本无酷暑。海水水质表现优异，水流平缓，在厦门众多海水浴场中，是最适合游泳的地点之一。
                </p>
            </div>
        </div>
        <div class="no2"></div>
        <!-- 文化 -->
        <div class="culture-details">
            <h3>
                <p>鹭岛文化寻踪</p>
            </h3>
            <div class="one">
                <p>珠绣</p>
            </div>
            <div class="two">
                <p>南音</p>
            </div>
            <div class="three">
                <p>送王船</p>
            </div>
            <div class="four">
                <p>木偶戏</p>
            </div>
            <div class="no3"></div>
            <div class="five">
                <p>打铁花</p>
            </div>
            <div class="six">
                <p>漆线雕</p>
            </div>
            <div class="seven">
                <p>剪瓷雕</p>
            </div>
            <div class="eight">
                <p>闽南传奇秀</p>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-middle">
            <dl>
                <dt>景点推荐</dt>
                <dd><a href="#">鼓浪屿</a></dd>
                <dd><a href="#">南普陀寺</a></dd>
                <dd><a href="#">曾厝垵</a></dd>
            </dl>
            <dl>
                <dt>特色美食</dt>
                <dd><a href="#">沙茶面</a></dd>
                <dd><a href="#">姜母鸭</a></dd>
                <dd><a href="#">蚵仔煎</a></dd>
            </dl>
            <dl>
                <dt>文化体验</dt>
                <dd><a href="#">闽南茶文化</a></dd>
                <dd><a href="#">歌仔戏欣赏</a></dd>
                <dd><a href="#">中秋博饼习俗</a></dd>
            </dl>
        </div>

        <div class="copyright">
            <p>
                <a href="#">关于厦门</a>|
                <a href="#">旅游攻略</a>|
                <a href="#">联系我们<span class="iconfont"></span></a>|
                <a href="#">搜索推荐</a>|
                <a href="#">友情链接</a>
            </p>
            <p>CopyRight@厦门旅游宣传平台</p>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>